<template>
  <div class="editSubject">
    <!-- 题目显示前置条件编辑 -->
    <el-dialog
      title="题目显示前置条件编辑"
      :visible.sync="dialogVisible"
      width="35%"
      :show-close="false"
      append-to-body
      :before-close="closeDailog"
    >
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item prop="prefixQuestionId" label="前置题目">
            <el-select v-model="formData.prefixQuestionId" @change="getOptions">
              <el-option
                v-for="(option,index) in list"
                :key="index"
                :label="option.questionTitle"
                :value="option.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="prefixOptionId" label="前置选项">
            <el-select v-model="formData.prefixOptionId" :disabled="!formData.prefixQuestionId">
              <el-option
                v-for="(option,index) in options"
                :key="index"
                :label="option.optionContent"
                :value="option.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" :loading="loading" @click="confrim">确定</Button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Button from '@/components/Button'
import FormContainer from '@/components/FormContainer'
import { questionnaireSetCondition } from '@/api/questionnaire'
export default {
  name: 'EditSubject',
  components: {
    Button,
    FormContainer
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formData: {
        prefixQuestionId: '',
        prefixOptionId: ''
      },
      item: {},
      list: [], // 题目列表
      options: [],
      formRules: {
        prefixQuestionId: {
          required: true,
          message: '请选择前置题目',
          trigger: 'blur'
        },
        prefixOptionId: {
          required: true,
          message: '请选择前置选项',
          trigger: 'change'
        }
      }
    }
  },
  methods: {
    //   根据选中的题目获取选项
    getOptions(val) {
      this.list.forEach(e => {
        if (e.id === val) {
          this.options = e.questionOptionDTOList
          return
        }
      })
    },
    // 打开弹窗
    openDailog(data, list) {
      this.item = data
      var ary = []
      list.forEach(e => {
        if ((e.questionType === 0 || e.questionType === 1) && e.id !== data.id) {
          ary.push(e)
        }
      })
      this.list = ary
      this.dialogVisible = true
    },
    closeDailog() {
      this.dialogVisible = false
    },
    // 确认
    confrim() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          var reqData = {
            id: this.item.id,
            prefixQuestionId: this.formData.prefixQuestionId,
            prefixOptionId: this.formData.prefixOptionId
          }
          questionnaireSetCondition(reqData)
            .then(res => {
              if (res.success === 1) {
                this.$emit('confrim')
                this.loading = false
                this.closeDailog()
              }
            })
            .catch(er => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.subject-area {
  min-height: 200px;
}
.answer_table {
  width: 100%;
  td {
    text-align: center;
    height: 40px;
    i {
      cursor: pointer;
    }
  }
}
.add-btns {
  cursor: pointer;
}
</style>
